<template>
	<view>
	  <view class="search-cont">
	  	<view class="search">
	  		<input type="text"  placeholder-class="inputclass" confirm-type ="search" 
	  		focus="true"
	  		placeholder="请输入关键字"
	  		v-model="searchdata"
	  		@confirm="onKeyInput"/>
	  	</view>
	  	<view class="search-code" @click="search()">
	  		搜索
	  	</view>
	  </view>
	  
	  <!-- 搜索历史 -->
	  <view class="search-history" v-if="ifhistory">
	  	<view class="search-title">
	  		<view>搜索历史</view>
	  		<view @click="removeStorage()"><image src="../../static/coen/searchend.svg" mode="widthFix"></image></view>
	  	</view>
	  	<!-- tab -->
	  	<view class="menu-block">
	  		<block v-for="(item,index) in setdata" :key="index">
	  			<view @click="menubtn(item)">{{item}}</view>
	  		</block>
	  	</view>
	  </view>
	  
	  <!-- 内容展示 -->
	  <view class="content-left" v-if="shopcont">
	  	<block v-for="(item, index) in takeshop" :key="index">
	  		<view class="content-view" click="takeoutClick(item, openid)">
	  			<view class="content-img">
	  				<image :src="item.logo" mode="aspectFill"></image>					
	  			</view>
	  			<view class="content-title">
	  				<text class="cont-take">{{item.shop}}</text>
	  				<view class="cont-monthly">
	  					<text>月售200</text>
	  					<text>约{{item.duration}}分钟</text>
	  				</view>
	  				<view class="cont-starting">
	  					<text>起送¥{{item.delivering}}</text>
	  					<text>配送¥{{item.physical}}</text>
	  					<text>人均¥{{item.capita}}</text>
	  				</view>
	  				<view class="cont-starting">
	  					<image src="/../../static/coen/liwu.svg" mode="widthFix"></image>
	  					<text>{{item.types}}</text>
	  				</view>
	  			</view>
	  		</view>
	  		
	  	</block>
	  </view>
	  <tips ref="tips"></tips>
	</view>
</template>

<script>
	import {publicing} from '../../api/api.js'
	import {searchurl} from '../../api/request.js'
	import tips from '../../element/tips.vue'
	var {log} = console
	export default {
		components:{
			tips
		},
		data() {
			return {
				searchdata: '',
				// 搜索结果
				takeshop: [],
				// 搜索历史
				setdata: [],
				ifhistory: false,
				shopcont: false
			}
		},
		methods: {
			// 搜索按钮
			search(){
				let searchkey = this.searchdata
				log(this.searchdata)
				if(searchkey != ''){
					this.ifhistory = false
					this.searchData(searchkey)
					this.getStorage(searchkey)
				}
			
			},
			// 搜索键盘
			onKeyInput(e){
				let searchkey = this.searchdata
				log(this.searchdata)
				if(searchkey != ''){
					this.ifhistory = false
					this.searchData(searchkey)
					this.getStorage(searchkey)
				}
			},
			getStorage(searchkey){
				let searcharray =  uni.getStorageSync('search_key') || []
				searcharray.unshift(searchkey)
				uni.setStorageSync('search_key', searcharray)
			},
			// 取本地缓存
			setStorage(){
				let setdata = uni.getStorageSync('search_key')
				let setdataarr = Array.from(new Set(setdata))
				if(setdataarr == ''){
					this.ifhistory = false
				}else{
					this.setdata = setdataarr
					this.ifhistory = true
				}
			},
			// 删除历史
			removeStorage(){
				uni.removeStorageSync('search_key')
				this.setStorage()
			},
			menubtn(item){
				this.ifhistory = false
				this.searchData(item)
			},
			searchData(searchkey){
				let data = {
					searchdata: searchkey
				}
				publicing(searchurl, data)
				.then((res)=>{
					log(res)
					if(res.data == '没有商品数据'){
						log('没有商品数据')
						this.shopcont = false
						let bull = true
						let tips = '没有找到哦'
						this.tising(bull, tips)
					}else{
						this.shopcont = true
						let bull = false
						let tips = ''
						this.takeshop = res.data
					}
					
				})
				.catch((err)=>{
					log(err)
				})
			},
			tising(bull,tips){
				this.$nextTick(()=>{
					this.$refs.tips.init(bull, tips)
					})
			}
		},
		created(){
			this.setStorage()
		}
		
		
	}
</script>

<style scoped>
@import '../../common/takeout.css';
	
.content-left{margin: 0 20upx;}
.search{
	height: 70upx;
	line-height: 70upx;
	width: 100%;
	display: flex;
	flex-direction: row;
	background:#f8f8f8;
	border-radius: 20upx;
	margin-left: 20upx;
	}
.search input{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size: 30upx;
		color: #666666; 
		padding-left: 30upx;
		  } 
.search-cont{display: flex; justify-content: space-between; height: 70upx; align-items: center;
			padding: 30upx 0;
			}
.search-code{width: 150upx; height: 50upx; text-align: center; font-size: 30upx;}
/* 搜索历史 */
.search-history{margin: 20upx;}
.search-title{font-size: 30upx; font-weight: bold;
			display: flex;
			justify-content:space-between;
			align-items: center;
			height: 60upx;
			line-height: 60upx;}
.search-title image{width: 36upx; height: 36upx; display: block;}
.menu-block view {
	background: #f7f8fa;
	border-radius: 6upx;
	font-size: 27upx;
	color: #292c33;
	text-align: center;
	padding: 10upx;
	margin: 20upx 20upx 0 0;
}

.menu-block {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}
</style>
